<template>
  <div class="hello">
    <App></App>
    <x-header>接口中心</x-header>

    <!--搜索区域-->
    <search
      @result-click="resultClick"
      @on-change="getResult"
      :results="results"
      v-model="value"
      position="absolute"
      auto-scroll-to-top
      top="46px"
      @on-focus="onFocus"
      @on-cancel="onCancel"
      @on-submit="onSubmit"
      ref="search"></search>

    <!--列表-->
    <panel header="接口列表" :footer="apiListFooter" :list="apiList" :type="apiListType" @on-click-footer="loadApi"></panel>

    <!-- 排序 弹出选择框-->
    <div v-transfer-dom>
      <popup v-model="sortIsShow">
        <popup-header
          left-text="取消" right-text="确定" title="请选择"
          @on-click-left="sortIsShow = false"
          @on-click-right="sortIsShow = false"></popup-header>
        <group gutter="0">
          <radio :options="sortOptions" :value="sortChecked"></radio>
        </group>
      </popup>
    </div>

    <!-- 分类 弹出选择框-->
    <div v-transfer-dom>
      <popup v-model="catalogIsShow">
        <popup-header
          left-text="取消" right-text="确定" title="请选择"
          @on-click-left="catalogIsShow = false"
          @on-click-right="catalogIsShow = false"></popup-header>
        <group gutter="0">
          <radio :options="catalogOptions" :value="catalogChecked"></radio>
        </group>
      </popup>
    </div>

    <!--底部操作栏-->
    <tabbar style="position: fixed">
      <tabbar-item @on-item-click="showSort()">
        <img slot="icon" src="../../assets/images/tabbar/sort.png">
        <span slot="label" style="color:#666">排序</span>
      </tabbar-item>
      <tabbar-item @on-item-click="showCatalog()">
        <img slot="icon" src="../../assets/images/tabbar/filter.png">
        <span slot="label" style="color:#666">分类</span>
      </tabbar-item>
    </tabbar>

  </div>
</template>
<script>
import App from '../../App'
import { Tabbar, TabbarItem, Group, Cell, XHeader, Search, PopupHeader, Popup, TransferDom, Radio, Panel } from 'vux'
// import Vue from 'vue'

// Vue.use(myTabbar)

export default {
  name: 'ApiCenter',
  directives: {
    TransferDom
  },
  components: {
    App,
    XHeader,
    Search,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    PopupHeader,
    Popup,
    TransferDom,
    Radio,
    Panel
  },
  data () {
    return {
      // 搜索
      results: [],
      value: 'test',
      // 底部弹框
      sortIsShow: false,
      catalogIsShow: false,
      sortOptions: [{key: 1, value: '默认排序'}, {key: 2, value: '调用量'}],
      sortChecked: 1,
      catalogOptions: [{key: 1, value: '全部'}, {key: 2, value: '水利'}, {key: 3, value: '电力'}, {key: 4, value: '住建'}, {key: 5, value: '桥梁'}],
      catalogChecked: 1,
      // 列表类型
      apiListType: '5',
      apiList: [
        {
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '标题一',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/apiDetail?id=1',
            replace: false
          },
          meta: {
            source: '水利',
            date: '2018-06-06',
            other: '991次'
          }
        },
        {
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/apiDetail?id=2',
            replace: false
          },
          meta: {
            source: '水利',
            date: '2018-06-06',
            other: '991次'
          }
        }],
      apiListFooter: {
        title: '<div style="text-align: center">更多</div>'
      }
    }
  },
  methods: {
    // 搜索
    setFocus () {
      this.$refs.search.setFocus()
    },
    resultClick (item) {
      window.alert('you click the result item: ' + JSON.stringify(item))
    },
    getResult (val) {
      console.log('on-change', val)
      this.results = val ? getResult(this.value) : []
    },
    onSubmit () {
      this.$refs.search.setBlur()
      this.$vux.toast.show({
        type: 'text',
        position: 'top',
        text: 'on submit'
      })
    },
    onFocus () {
      console.log('on focus')
    },
    onCancel () {
      console.log('on cancel')
    },
    // 显示排序
    showSort () {
      this.sortIsShow = true
    },
    // 显示分类
    showCatalog () {
      this.catalogIsShow = true
    },
    // 加载api
    loadApi () {
      var item = {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题二',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: {
          path: '/apiDetail?id=3',
          replace: false
        },
        meta: {
          source: '水利',
          date: '2018-06-06',
          other: '991次'
        }
      }
      this.apiList.push(item)
    }
  }
}
function getResult (val) {
  let rs = []
  for (let i = 0; i < 20; i++) {
    rs.push({
      title: `${val} result: ${i + 1} `,
      other: i
    })
  }
  return rs
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

